<template>
    <div id="page-order-pay">
        <div class="page-title">
            位置：我的订单 / 确认订单 / 付款
        </div>
        <div class="pay-sign">
            为了您的财产安全，不要点击陌生链接、不要向任何人透露银行卡或验证码信息，谨防诈骗！
        </div>
        <ul class="step-bar">
            <li class="active"><i class="icon icon-confirm-order"></i><span>确认订单</span></li>
            <li class="active"><i class="icon icon-pay"></i><span>付款</span></li>
            <li><i class="icon icon-success"></i><span>支付成功</span></li>
        </ul>
        <div class="pay-status-wrap">
            <div class="title">
                <span>{{$store.state.nickName}}</span>
                |
                <nuxt-link :to="{name:'personal-orders'}">订单中心</nuxt-link>
            </div>
            <div class="fee-info">
                <span class="left">订单提交成功，请尽快付款！订单号：{{orderId}}</span>
                <span class="right"><span>应付金额：</span><span class="fee">¥{{(realMoney/100).toFixed(2)}}</span></span>
            </div>
            <div class="wx-pay" v-if="payType==1">
                <div class="text-weixinzhifu">
                    <img src="@/assets/img/orderPay_pay-weixin.png" alt="微信支付">
                </div>
                <div id="wx-qrcode-wrap">
                    <div id="qrcode"></div>
                    <div class="wx-app">
                        <img src="@/assets/img/orderPay_weixin-app.jpg" alt="微信扫一扫">
                    </div>
                </div>
            </div>
            <div class="ali-pay" v-else-if="payType==2">
<!--                支付完成？点击 <span>确定</span> 继续...-->
                支付结果验证中，请耐心等待...
            </div>
            <div class="ali-pay" v-else-if="payType==3">
                信息已提交，请尽快向对公账户转账。
            </div>
        </div>
    </div>
</template>

<script>
    // import QRCode from 'qrcodejs2';
    export default {
        name: "orderPay",
        data(){
            return {
                subscribeId:'',
                orderId:'',
                payType:1,
                wxPayQrCode:'',
                realMoney:0.00,
                orderCreateTime:''
            }
        },
        mounted() {
            // this.$store.state.sideBarShow = true;
            this.subscribeId = this.$route.query.subscribeId;
            this.orderId = this.$route.query.orderId?this.$route.query.orderId:'查询中...';
            this.payType = this.$route.query.payType?this.$route.query.payType:1;

            this.timerQueryPayStatus = setInterval(()=>{
                this.$request.orderDetail({
                    orderId:this.orderId
                }).then(res=>{
                    console.log(res);
                    if(res.status==200){
                        if(res.data.appOrder.orderPayStatus){
                            console.log('支付完成');
                            clearInterval(this.timerQueryPayStatus);
                            this.$router.push({
                                name:'personal-pay-done',
                                query:{
                                    orderId:this.orderId,
                                    orderCreateTime:this.orderCreateTime
                                }
                            })
                        }

                    }else {
                        this.requestError(res.status,res.message);
                    }

                },err=>{
                    console.log(err);
                    this.requestFail(err);
                })
            },5000);

            this.$request.orderDetail({
                orderId:this.orderId
            }).then(res=>{
                console.log(res);
                if(res.status==200){
                    let resData = res.data;
                    this.orderCreateTime = resData.appOrder.orderCreateTime;
                    if(resData.appOrder.orderPayStatus){
                        this.$message({
                            type: 'warning',
                            message: '此订单已经支付'
                        });
                        clearInterval(this.timerQueryPayStatus);
                        this.$router.push({
                            name:'personal-pay-done',
                            query:{
                                orderId:this.orderId,
                                orderCreateTime:this.orderCreateTime
                            }
                        })
                    }else {
                        this.orderId = resData.appOrder.orderId;
                        this.realMoney = resData.appOrder.cashFee;
                        if(this.payType==1){
                            this.$request.wxPay({
                                orderId:this.orderId
                            }).then(res=>{
                                console.log(res);
                                if(res.status==200){
                                    this.wxPayQrCode = res.data;
                                    let QRCode = this.QRCode;
                                    this.qrcode = new QRCode('qrcode', {
                                        text: res.data,
                                        width: 145,
                                        height: 145,
                                        colorDark : '#000000',
                                        colorLight : '#ffffff',
                                        correctLevel : QRCode.CorrectLevel.H
                                    });
                                    // console.log(qrcode)
                                }else {
                                    this.requestError(res.status,res.message);
                                }
                            },err=>{
                                console.log(err);
                                this.requestFail(err);
                            })
                        }else if(this.payType==2){
                            this.$request.payAliPay({
                                orderId:this.orderId
                            }).then(res=>{
                                console.log(res);
                                if(res.status==200){
                                    var newwindow = window.open("#","_blank");
                                    newwindow.document.write(res.data);
                                }else {
                                    this.requestError(res.status,res.message);
                                }
                            },err=>{
                                console.log(err);
                                this.requestFail(err);
                            })
                        }else {
                            this.$request.transferPay({
                                orderId:this.orderId
                            }).then(res=>{
                                console.log(res);
                                if(res.status!=200){
                                    this.requestError(res.status,res.message);
                                }
                            },err=>{
                                console.log(err);
                                this.requestFail(err);
                            })
                        }
                    }

                }else {
                    this.requestError(res.status,res.message);
                }

            },err=>{
                console.log(err);
                this.requestFail(err);
            })

        },
        destroyed() {
            clearInterval(this.timerQueryPayStatus);
        }
    }
</script>

<style scoped lang="less">
#page-order-pay{
    @moudle-bg-color:#ffffff;
    @under-line:1px solid #F5F5FB;
    font-family:'Microsoft YaHei','微软雅黑';
    .color(#090909);

    .pay-sign{
        background-color: #f9e2cb;
        .lh(39px);
        .color(#cc0606);
        padding-left: 14px;
    }
    ul.step-bar{
        .bg('@{img-base-url}order_step-2.png');
    }
    .pay-status-wrap{
        background-color: #FFFFFF;
        margin-top: 12px;
        .title{
            text-align: right;
            .fz(14px);
            .color(#7B7A7A);
            .lh(55px);
            padding-right: 21px;
            .bg('@{img-base-url}orderPay-text-shouyintai.png');
            background-size: auto;
            background-position: 20px center;
            border-bottom: 2px solid #E9E9E9;
        }
        .fee-info{
            .lh(70px);
            .fz(16px);
            .color(#171717);
            padding: 0 20px;
            border-bottom: 2px solid #E9E9E9;

            .right{
                .color(#131313);
                span{
                    vertical-align: middle;
                }
                .fee{
                    .color(#DB0000);
                    .fz(24px);
                    font-weight: bold;
                }
            }
        }
        .wx-pay{
            .size(100%,350px);
            position: relative;
            .text-weixinzhifu{
                position: absolute;
                top: 30px;
                left: 116px;
            }
            #wx-qrcode-wrap{
                //.size(170px,170px);
                .width(360px);
                position: absolute;
                left: 420px;
                top: 100px;

                #qrcode{
                    .size(165px,165px);
                    .fl;
                    padding: 10px;
                    border: 1px solid #ededed;
                }
                .wx-app{
                    .fr;
                }
            }
        }
        .ali-pay{
            .height(200px);
            padding: 20px;
            .color(@color-primary);
            span{
                .color(@color-success);
            }
        }
    }
}
</style>